import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import hbs from 'htmlbars-inline-precompile';

<Meta title="Components/Organisms/Side Menu" />

# Side Menu

A side menu spans the full length of a given screen, used primarily to contain navigation elements. Side menus are typically hidden until triggered by a user action (i.e. clicking a hamburger menu).

## Use Cases

-   Used to hold navigation options that don’t need to be visible to the user all of the time.
    
-   Used to hide navigation options from the main view, keeping a page simpler.
    
-   Used as an alternative primary navigation on mobile
    

## What’s Inside

At the minimum, a side menu should contain a series of navigational links to the rest of the site. Side menu navigations should contain top-level links, serving the purpose of any other primary navigation.

  

Radial’s default side menu includes placeholders for branding, primary CTA, primary/secondary navigation, and social links. It also contains an area for additional components to be dropped in as needed. In many cases, much of what can be found in the site’s footer can also be found in its sidemenu including a donate CTA, primary nav links, social links, and more. The vertical order of these components might be different depending on brand or use case.
 
<img alt="side menu anatomy" src="./images/Organisms-Sidebar-Whitelabel-anatomy.png" width="375" />

1- **Close Button** - Clickable icon that closes the side menu when clicked.

2- **Brand Placeholder** - Placeholder for logo of respective site/brand.

3- **Primary CTA** - Used most times for donate call-to-actions.

5- **Primary Navigation** - Top level links to larger areas of a site’s domain.

5- **Vertical Component Area** - Flexible area for custom components to be dropped in as needed.

6- **Search** - Text input component providing search functionality if needed.

7- **Secondary Navigation** - Links to inner pages or lower-level areas of the site.

8- **Social Icons** - Link off to a brand's social media accounts.

9- **Brand Reel** - NYPR logo and menu of other brands.

10- **Legal Text** - Copyright and links to terms and privacy policy.


## Behavior

Side menus should close on the following actions:

* Background click (i.e. clicking off the menu)
    
* Close icon button click
    
* Escape key
    
* The close function being called
    

  

By default, side menus use our standard Outgoing and Incoming [animation curves](https://nypublicradio.github.io/nypr-design-system/?path=/docs/foundations-animation--page#easing-and-timing) for entering and exiting.

  

Side menus should always be kept on the same side as the objects that triggered them, it’s best practice to have side menus on the left side.

  

## Mobile

On mobile side menus expand to cover 100% of the width of the screen when opened.



## Configurations

<Preview withToolbar={true}>
  <Story name="Side Menu" height="1000px">{{
    template: hbs`
          <NyprOHeader
                  @donateURL={{DONATE_URL}}
                  data-test-main-header
                  as |header|
          >
            <header.left data-test-header-left as |left|>
              <left.branding>
                {{#link-to "index"}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo'/>
                {{/link-to}}
              </left.branding>
            </header.left>
            
            <header.nav @navItems={{primaryNav}} data-test-top-nav/>
          
            <header.right data-test-header-right as |right|>
              <NyprMShareTools class="c-main-header__share" as |tools|>
                <tools.share
                  @service='facebook'
                  @utm={{hash medium='social' source='facebook' campaign='shared_facebook'}}
                  data-test-facebook-share
                />
                <tools.share
                  @service='twitter'
                  @params={{hash text=share.title via='gothamist'}}
                  @utm={{hash medium='social' source='twitter' campaign='shared_twitter'}}
                  data-test-twitter-share
                />
                <tools.share
                  @service='reddit'
                  @params={{hash title=share.title}}
                  @utm={{hash medium='social' source='reddit' campaign='shared_reddit'}}
                  data-test-reddit-share
                />
                <tools.share
                  @service='email'
                  @params={{hash body=(concat share.title ' - {{URL}}')}}
                  @utm={{hash medium='social' source='email' campaign='shared_email'}}
                  data-test-email-share
                />
              </NyprMShareTools>
              <NyprAButton class='c-main-header__donate o-button--sm mod-donate' name="donateHeader" @url={{DONATE_URL}}>
                Donate
              </NyprAButton>
              <right.search as |search|>
                <search.open/>
              </right.search>
            </header.right>
          
            <header.menu @donateUrl={{DONATE_URL}} @isOpen=true data-test-side-menu as |menu|>
              <menu.branding>
                {{#link-to 'index'}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo' class="site-header-title-logo"/>
                {{/link-to}}
              </menu.branding>
          
              <menu.primaryNav @navItems={{primaryNav}}/>
              
              <menu.component>
                <p><em>slot for component</em></p>
              </menu.component>
              
              <menu.secondaryNav @navItems={{secondaryNav}}/>
          
              <menu.social @label='Follow Us' as |share|>
                <share.link @service='facebook' @username='gothamist'/>
                <share.link @service='twitter' @username='gothamist' />
                <share.link @service='instagram' @username='gothamist' />
              </menu.social>
              
            </header.menu>
          </NyprOHeader>`,
    context: { 
      primaryNav: [
        {
          route: ['index'],
          text: 'Link 1',
        },
        {
          route: ['index'],
          text: 'Link 2',
        },
        {
          route: ['index'],
          text: 'Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>